<template>
  <view v-if="shenheStatus == 0" class="page">
    <template v-if="data">
      <view class="header">
        <view class="headerTitle">
          <i :class="['iconfont', getStatusList(data.status).icon]"></i>

          <view class="tit" v-if="data.status === -1">等待付款</view>
          <view class="tit" v-else>{{ getStatusList(data.status).name }}</view>
        </view>

        <view class="headerDes">
          <template v-if="data.status === -1">
            <view class="des">
              需付款：¥{{ data.pay_price }} 剩余：
              <u-count-down
                :show-days="false"
                :show-hours="false"
                separator="zh"
                autoplay
                :timestamp="getTimestamp"
                bg-color="#f02503"
                color="#fff"
                separator-color="#fff"
                @end="handle('rest')"
              ></u-count-down
            ></view>
            <view class="btn" @click="handle('pay')"> 立即支付 </view>
          </template>
          <template v-else-if="data.status === 4">
            <view class="des" v-if="data.user_revoke_reason">
              取消原因：{{ data.user_revoke_reason }}
            </view>
            <view
              class="btn"
              @click="
                $utils.toUrl(
                  `/marketing/serviceHome/engineer/item/index?id=${data.worker.id}`
                )
              "
            >
              再次购买
            </view>
          </template>
          <view class="des" v-else>
            {{ getStatusList(data.status).des }}
          </view>
        </view>
      </view>

      <view class="content">
        <view class="contentBg"></view>

        <view class="contentBox">
          <view
            class="m-box"
            v-if="data.progress && data.progress.length"
            @click="
              $utils.toUrl(
                `/marketing/serviceHome/order/progress/index?id=${data.id}`
              )
            "
          >
            <view class="addressBox">
              <view class="addressBoxLet">
                <view class="hd">
                  <view class="icon"
                    ><i class="iconfont icon-landtransportation"></i
                  ></view>
                  <view class="name">{{
                    getProgressStatus(data.progress[0].status)
                  }}</view>
                </view>

                <view class="address">{{ data.progress[0].msg }}</view>
              </view>

              <view class="addressBoxRig">
                <i class="iconfont icon-arrow-right"></i>
              </view>
            </view>
          </view>

          <view class="m-box">
            <view class="addressBox">
              <view class="addressBoxLet">
                <view class="hd">
                  <view class="icon"><i class="iconfont icon-seat"></i></view>
                  <view class="name">{{ data.name }}</view>
                  <view class="mobile">{{ data.mobile }}</view>
                </view>

                <view class="address"> 地址：{{ data.address }} </view>
              </view>
            </view>
          </view>

          <view class="m-box" v-if="data.goods_list && data.goods_list.length">
            <view class="goodsItem">
              <pageHead :item="data" :showStatus="false"></pageHead>

              <template v-for="(item, i) of getGoodsList">
                <pageGoodItem :item="item"></pageGoodItem>
                <view
                  :key="i"
                  class="btn"
                  v-if="!item.is_comment"
                  @click="handle('evaluate', item)"
                  ><view>立即评价</view></view
                >
              </template>
            </view>

            <view
              class="seebtn"
              v-if="data.goods_list.length > 1 && !showGoodsMore"
              @click="showGoodsMore = true"
              >查看全部订单信息 <i class="iconfont icon-arrow-down"></i
            ></view>
          </view>

          <view class="m-box">
            <view class="formItem line">
              <view class="formbox">
                <view class="let">订单编号：</view>
                <view class="rig">
                  <view class="des"
                    >{{ data.order_no
                    }}<view class="copy" @click="handle('copy', data.order_no)"
                      >复制</view
                    ></view
                  >
                </view>
              </view>
              <view class="formbox">
                <view class="let">下单时间：</view>
                <view class="rig">
                  <view class="des">{{ data.created_at_str }}</view>
                </view>
              </view>
            </view>

            <view class="formItem line">
              <view class="formbox">
                <view class="let">支付方式：</view>
                <view class="rig">
                  <view class="des">{{ getPayType(data.pay_type) }}</view>
                </view>
              </view>
            </view>

            <view class="formItem line">
              <view class="formbox">
                <view class="let">出行方式：</view>
                <view class="rig">
                  <view class="des">出租/滴滴</view>
                </view>
              </view>
              <view class="formbox">
                <view class="let">服务时间：</view>
                <view class="rig">
                  <view class="des"
                    >{{ data.time_start_service }}
                    <template v-if="data.time_end_service"
                      >/{{ data.time_end_service }}</template
                    >
                  </view>
                </view>
              </view>
            </view>

            <view class="formItem">
              <view class="formbox flex">
                <view class="let">商品总额：</view>
                <view class="rig">
                  <view class="des"> ¥{{ data.goods_price }} </view>
                </view>
              </view>
              <view class="formbox flex">
                <view class="let">出行费用：</view>
                <view class="rig">
                  <view class="des"> + ¥{{ data.express_price }} </view>
                </view>
              </view>

              <view class="formbox flex">
                <view class="let"></view>
                <view class="rig">
                  <view class="total"
                    >需付款：
                    <view class="s1">
                      ¥ <view>{{ getPrice(data.pay_price)[0] }}</view
                      >.{{ getPrice(data.pay_price)[1] }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="page-footer">
        <view class="btn">
          <pageBtn :item="data" ref="pageBtn"></pageBtn>
        </view>
      </view>

      <pageCancalPop ref="cancalPop" :item="item"></pageCancalPop>
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { orderInfo } from "@/api/marketing/callOut";
import { progressStatus } from "../static/order";
import pageGoodItem from "../components/page-good-item.vue";
import pageHead from "../components/page-head.vue";
import { payType } from "../static/order";
import pageBtn from "../components/page-btn.vue";
import pageCancalPop from "../components/page-cancal-pop.vue";
import { statusList } from "../static/order";

export default {
  components: {
    Shenhe,
    pageGoodItem,
    pageHead,
    pageBtn,
    pageCancalPop,
  },

  computed: {
    getTimestamp() {
      if (this.data && this.data.created_at)
        return (
          parseInt(this.data.created_at) + 900 - new Date().getTime() / 1000
        );
      return 900;
    },

    getStatusList() {
      return (status) => {
        return statusList[status];
      };
    },

    getPrice() {
      return (price) => {
        if (!price) return ["0", "00"];
        return price.split(".");
      };
    },

    getPayType() {
      return (type) => {
        return payType[type] ? payType[type].name : "-";
      };
    },

    getGoodsList() {
      if (!this.data || !this.data.goods_list) {
        return [];
      }

      if (this.showGoodsMore) {
        return this.data.goods_list;
      }
      return this.data.goods_list.slice(0, 1);
    },

    getProgressStatus() {
      return (status) => {
        return progressStatus[status] ? progressStatus[status].name : "";
      };
    },
  },

  data() {
    return {
      showGoodsMore: false,
      data: null,
      id: undefined,
      item: null,
    };
  },

  onLoad(opi) {
    this.id = opi.id;
  },

  onShow() {
    this.Emit.$on("handle", this.handle);
    this.clearData();
  },

  onHide() {
    this.Emit.$off("handle");
  },

  onUnload() {
    this.Emit.$off("handle");
  },

  methods: {
    handle(type, params) {
      switch (type) {
        case "cancal":
          this.item = params;
          this.$refs.cancalPop.show = true;
          break;

        case "rest":
          this.clearData();
          break;

        case "evaluate":
          this.$utils.toUrl(
            `/marketing/serviceHome/order/evaluate/index?id=${this.id}&goods_ids=${params.goods_id}`
          );
          break;

        case "pay":
          this.$refs.pageBtn.pay();
          break;

        case "copy":
          uni.setClipboardData({
            data: params,
          });
          break;

        default:
          break;
      }
    },

    async clearData() {
      try {
        let { id } = this;
        const res = await orderInfo({
          id,
        });
        uni.stopPullDownRefresh();
        if (res.code == 0) {
          this.data = res.data;
        }
      } catch (error) {
        this.$utils.toast(error);
      }
    },
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="scss">
.page {
  padding-bottom: 130rpx;
  padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: #f2f2f2;
}

.page {
  min-height: 100vh;
  background: #f2f2f2;
  overflow: hidden;
}

.header {
  min-height: 150rpx;
  padding: 20rpx 0;
  background: #f0250e;
}

.content {
  position: relative;
  padding: 0 24rpx;
}

.m-box {
  margin-bottom: 24rpx;
  padding-left: 24rpx;
  padding-right: 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.addressBox {
  display: flex;
  align-items: center;
  padding: 30rpx 0;

  .addressBoxLet {
    flex: 1;
    overflow: hidden;
  }

  .addressBoxRig {
    padding-left: 10rpx;

    .iconfont {
      font-size: 11rpx;
      color: #262626;
    }
  }

  .hd {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: bold;
    color: #262626;

    .iconfont {
      font-size: 40rpx;
    }

    .name {
      padding: 0 22rpx 0 6rpx;
    }
  }

  .address {
    padding-top: 16rpx;
    font-size: 24rpx;
    color: #8c8c8c;
  }
}

.goodsItem {
  padding: 24rpx 0 14rpx;

  .btn {
    display: flex;
    justify-content: flex-end;
    padding: 10rpx 0;

    view {
      padding: 12rpx 24rpx;
      color: #262626;
      border-radius: 32px;
      border: 1px solid #999;
    }
  }
}

::v-deep {
  .itemCon {
    padding: 10rpx 0;
  }

  .itemHead {
    padding-bottom: 10rpx;
  }

  .itemFooter {
    .btn {
      margin-top: 0;
      &.on {
        color: #fff !important;
        background: #f0250e;
      }
    }
  }
}

.seebtn {
  padding: 24rpx 0;
  border-top: 1px solid #f8f8f8;
  text-align: center;
  font-size: 24rpx;
  color: #8c8c8c;
}

.formbox {
  display: flex;
  padding: 12rpx 0;
  font-size: 26rpx;
  color: #262626;

  &.flex {
    justify-content: space-between;
  }

  .des {
    font-weight: bold;
  }

  .copy {
    display: inline-block;
    margin-left: 44rpx;
    padding: 2rpx 12rpx;
    font-size: 22rpx;
    background: #f2f2f2;
    border-radius: 32px;
    font-weight: normal;
  }

  .total {
    display: flex;
    align-items: flex-end;
    font-size: 26rpx;
    color: #262626;

    .s1 {
      display: flex;
      align-items: flex-end;
      color: #f0250e;
      font-size: 24rpx;
      line-height: 1;

      view {
        font-weight: bold;
        font-size: 36rpx;
      }
    }
  }
}

.formItem {
  padding: 14rpx 0;
}

.line {
  border-bottom: 1px solid #f8f8f8;
}

.page-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  background: #fff;
  padding-bottom: calc(constant(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));

  .btn {
    padding: 20rpx 24rpx;
  }
}

.contentBox {
  position: relative;
  z-index: 3;
}

.contentBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 134rpx;
  background: linear-gradient(180deg, #f0250e 0%, #f2f2f2 100%);
}

.headerTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  font-weight: bold;

  .iconfont {
    font-size: 50rpx;
    font-weight: normal;
  }
}

.headerDes {
  padding-top: 24rpx;
  font-size: 28rpx;
  font-weight: normal;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30rpx auto 0;
    width: 200rpx;
    height: 68rpx;
    background: #fff;
    border-radius: 32px;
    font-size: 28rpx;
    color: #f0250e;
    font-weight: bold;
  }
}

.header {
  text-align: center;
  color: #fff;
}
</style>
